import React from 'react';
import { useAiCorrectorStore } from '@/stores/useAiCorrectorStore';

const ExportButton: React.FC = () => {
  const { exportReport, state } = useAiCorrectorStore();
  
  const handleExport = () => {
    exportReport();
  };
  
  return (
    <button
      onClick={handleExport}
      disabled={state.issues.length === 0}
      className={`px-4 py-2 rounded-lg flex items-center ${
        state.issues.length === 0
          ? 'bg-zinc-200 text-zinc-500 cursor-not-allowed'
          : 'bg-zinc-800 text-white hover:bg-zinc-700'
      }`}
    >
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        className="h-5 w-5 mr-2" 
        fill="none" 
        viewBox="0 0 24 24" 
        stroke="currentColor"
      >
        <path 
          strokeLinecap="round" 
          strokeLinejoin="round" 
          strokeWidth={2} 
          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 
        />
      </svg>
      导出报告
    </button>
  );
};

export default ExportButton;
